<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <img id="h1" src="off.gif">  <br><br>
    <div class="cls">杰普软件</div>   <br>
    <div class="cls">Java程序员</div>  <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <input type="button"  value="全选" id="all">
    <script>
        //根据元素的id
        var oImg = document.getElementById('h1');
        console.log(oImg);
        console.log(typeof oImg);
        //根据元素的class属性，获取element数组
        var oDivs = document.getElementsByClassName('cls');
        console.log(oDivs);
        console.log(typeof oDivs);
        //根据元素标签名字，获取element数组
        var oInputs = document.getElementsByTagName('input');
        console.log(oInputs);
        //根据元素的name属性，获取element数组
        var oInputsHobby = document.getElementsByName('hobby');
        console.log(oInputsHobby);
        console.log(oInputs === oInputsHobby);
        console.log(oInputs == oInputsHobby);
        //对比一下相同元素的不同访问方式是否相同
        console.log(oInputsHobby[0] === oInputs[0]);
        console.log(oInputsHobby[0] == oInputs[0]);

        // oDivs[1].innerHTML = '<h1 style = "color: red" >996狂人</h1>';



        //点亮灯泡
        //获取img标签元素，修改src属性
        // var oImg = document.getElementById('h1');//上面有了
        console.log(oImg.src);
        //绑定一个点击事件
        oImg.onclick = function() {
            //判断图片的src里的值是of还是on
            if (oImg.src.indexOf('off') != -1) {
                oImg.src = 'on.gif';
            } else {
                oImg.src = 'off.gif';
            }
        }
        //给div后面的字追加内容并修改样式
        //获取所有div
        //oDivs已经在上文获取
        for(var oDivs of oDivs){
            //获取内容
            var sValue = oDivs.innerHTML;
            //追加内容
            var appendString = '<span style= "color: red">very good</span>';
            //拼接
            oDivs.innerHTML = sValue.concat(appendString);
        }
        //获得按钮
        //document.getElementById("all");

        //全选
        // function all(){
        //     //var oInputsHobby = document.getElementsByName('hobby');
        //     oInputsHobby.forEach
        // }
        //一个querySelector案例
        var oDIVS = document.querySelectorAll("div");
        for(var i = 0; i < oDIVS.length; i++) {
            oDIVS[i].addEventListener("click", function(){//事件监听
            alert("点击了");
        });
}
    </script>
</body>
</html>